@main("USA Dream - образование в США") {

@mainContainer(""){
@header("price")
}




@mainContainer(""){
<div class="float-list-item">
    <div class="arrow">
        <img src="@routes.Assets.at("images/arrow_circle_pink.png")" height="40px"/>
    </div>
    <div class="list-item-title">Первая программа</div>
    <p>Рассчитайте стоимость программы</p>


</div>

<table cellpadding="10" border="0">
    <tr>
        <td width="300px">
            Перелет
        </td>
        <td>
            <input type="checkbox" name="first" checked="checked" value="500"/> 500
        </td>
    </tr>
    <tr>
        <td width="300px">
            Проживание
        </td>
        <td>
            <input type="checkbox" name="first" checked="checked" value="6000"/> 6000
        </td>
    </tr>
    <tr>
        <td width="300px">
            Еда
        </td>
        <td>
            <input type="checkbox" name="first" checked="checked" value="4000"/> 4000
        </td>
    </tr>
    <tr>
        <td width="300px">
            Обучение
        </td>
        <td>
            <input type="checkbox" name="first" checked="checked" value="10000"/> 10000
        </td>
    </tr>
</table>

<p id="sum"></p>

<script>

    function displaySum(){
        var sum = 0;
        $('input[name="first"]').each(function() {
            if( $(this).is(':checked') ) sum += Number($(this).val());
        });
        $("#sum").text("Общая стоимость: "+sum);
    }

    $(document).ready(displaySum);
    $("input[name='first']").click(displaySum);


</script>

<div class="float-list-item">
    <div class="arrow">
        <img src="@routes.Assets.at("images/arrow_circle_pink.png")" height="40px"/>
    </div>
    <div class="list-item-title">Вторая программа</div>
    <p>Можно поставить тут много радиобаттонов, чтобы можно было расчитать разные варианты.</p>
</div>

<script>
    $("#aSpoilerPhoto").click(function() {
                $("#spoilerPhoto").toggle("fast");
            }
    )
</script>
}

@footer()



}